<template>
    <div class="app-container">
        <div v-if="$route.path == '/orderManagement/orderList'">
            <div class="head-tabs">
                <el-tabs v-model="activeName" @tab-click="handleTabClick">
                    <el-tab-pane label="全部" name="first"></el-tab-pane>
                    <el-tab-pane label="待付款" name="second"></el-tab-pane>
                    <el-tab-pane label="待发货" name="third"></el-tab-pane>
                    <el-tab-pane label="待收货" name="fourth"></el-tab-pane>
                    <el-tab-pane label="待评价" name="fifth"></el-tab-pane>
                    <el-tab-pane label="售后" name="sixth"></el-tab-pane>
                </el-tabs>
            </div>
            <section v-loading="loading">
                <!-- 全部 -->
                <div class="content">
                    <el-row class="top" :gutter="10" type="flex" align="middle">
                        <!-- <el-col :span="3">
                            <el-button type="primary" size="mini" @click="$router.push(`/customerManagement/newSign/baseInfo/baseInfoDetail?title=添加`)">添加</el-button>
                            <el-button @click="del" size="mini">删除</el-button>
                        </el-col>
                        <el-col :span="4">
                            <el-input placeholder="客户名称" suffix-icon="el-icon-search" v-model="input"> </el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-input placeholder="牌照编号" suffix-icon="el-icon-search" v-model="input"> </el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-input placeholder="公司名称" suffix-icon="el-icon-search" v-model="input"> </el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-date-picker v-model="time" placeholder="登记时间" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
                        </el-col> -->
                    </el-row>
                    <el-table key="0" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;margin-top:10px;" :header-cell-style="{background:'#f5f6f8'}">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="id" label="编号">
                        </el-table-column>
                        <el-table-column label="商品列表" width="700">
                            <template slot-scope="scope">
                                <el-table :data="scope.row.goods" :header-cell-style="{background:'#f5f6f8'}" border>
                                    <el-table-column label="商品小图">
                                        <template slot-scope="scope">
                                            <el-image style="width: 100px; height: 100px" :src="scope.row.goods_images" fit="fill" :preview-src-list="scope.row.srcList">
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="goods_name" label="商品名称">
                                    </el-table-column>
                                    <el-table-column label="规格属性SKU" width="200">
                                        <template slot-scope="scope">
                                            <div>{{scope.row.sku_text}} </div>
                                            <div>数量:x{{scope.row.number}}件</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="sale_price" label="单价">
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-table-column>
                        <el-table-column label="价格总计" align="center">
                            <template slot-scope="scope">
                                <div>{{scope.row.orders_payable}}</div>
                                <div>（含运费：{{scope.row.freight}}）</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="create_time" label="创建时间" width="150">
                        </el-table-column>
                        <el-table-column label="订单状态">
                            <template slot-scope="scope">
                                <div>{{scope.row.status | orderStatus}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="买家姓名">
                            <template slot-scope="scope">
                                <div>会员id:{{scope.row.user.id}}</div>
                                <div>买家姓名：{{scope.row.user.truename}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="300">
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row,0)" type="info" size="mini">详情</el-button>
                                <el-button @click="handleClick(scope.row,1)" type="primary" size="mini" v-if="scope.row.status==3 || scope.row.status==4  || scope.row.status==7 || scope.row.status==8 || (scope.row.status==9 && scope.row.express_count > 0) ">查看物流</el-button>
                                <el-button @click="handleClick(scope.row,2)" type="success" size="mini" v-if="scope.row.status==2 ||  (scope.row.status==9 && scope.row.express_count==0)">发货</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination style="margin-top: 40px;text-align: center" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[10, 20, 50, 100]" :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="form.total">
                    </el-pagination>
                </div>
                <el-dialog title="物流信息" :visible.sync="dialogVisible" width="50%">
                    <div>物流单号:{{detail.express_no}}</div>
                    <div style="margin-top:10px">物流名称:{{detail.express_name}}</div>
                    <el-timeline style="margin-top:20px">
                        <el-timeline-item v-for="(activity, index) in detail.content" :key="index" :timestamp="activity.time">
                            {{activity.context}}
                        </el-timeline-item>
                    </el-timeline>
                </el-dialog>
                <el-dialog title="发货物流信息" :visible.sync="show" width="30%">
                    <el-form ref="form" :model="form" :rules="rules">
                        <el-form-item prop="express_name" label="物流公司" style="width:50%">
                            <el-select v-model="form.express_name" placeholder="请选择物流公司" style="width:100%">
                                <el-option label="中通快递" value="zhongtong"> </el-option>
                                <el-option label="圆通快递" value="yuantong"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="express_no" label="物流单号" style="width:50%">
                            <el-input v-model="form.express_no" placeholder="请输入物流单号"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="show = false">取 消</el-button>
                        <el-button type="primary" @click="submit">确 定</el-button>
                    </span>
                </el-dialog>
            </section>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>

export default {
    data() {
        return {
            activeName: 'first',
            form: {
                total: 1,
                limit: 10,
                page: 1,
                status: 0,
                orders_id: '',
                express_no: '',
                express_name: '',
            },
            tableData: [],
            loading: false,
            dialogVisible: false,
            rules: {
                express_name: [
                    { required: true, message: '请选择物流公司', trigger: 'change' },
                ],
                express_no: [
                    { required: true, message: '请输入物流单号', trigger: 'blur' },
                ],
            },
            detail: {
                activities: []
            },
            show: false
        }
    },
    created() {
        if (this.$route.query.activeName) {
            this.activeName = this.$route.query.activeName
        }
    },
    mounted() {
        this.getCompanyList()
    },
    filters: {
        orderStatus(val) {
            switch (val) {
                case 1:
                    return '待付款';
                case 2:
                    return '待发货 ';
                case 3:
                    return '待收货';
                case 4:
                    return '已完成';
                case 5:
                    return '已取消 ';
                case 6:
                    return '退款中';
                case 7:
                    return '已退款';
                case 8:
                    return '已评价 ';
                case 9:
                    return '部分退款';
            }
        }
    },
    methods: {
        handleTabClick(tab) {
            switch (tab.name) {
                case 'first':
                    this.form.status = 0
                    break;
                case 'second':
                    this.form.status = 1
                    break;
                case 'third':
                    this.form.status = 2
                    break;
                case 'fourth':
                    this.form.status = 3
                    break;
                case 'fifth':
                    this.form.status = 4
                    break;
                case 'sixth':
                    this.form.status = 5
                    break;
            }
            this.getCompanyList(1)
        },
        // 获取订单列表
        async getCompanyList(page) {
            if (page) {
                this.form.page = page
            }
            this.loading = true
            let res = await this.$Http.getOrderList(this.form)
            if (res.status == 1) {
                this.tableData = res.data.data || []
                this.form.total = res.data.total
                for (let i in this.tableData) {
                    for (let j in this.tableData[i].goods) {
                        this.tableData[i].goods[j].srcList = [this.tableData[i].goods[j].goods_images]
                    }
                }
            }
            this.loading = false
        },
        async submit() {
            let form = {}
            form.orders_id = this.form.orders_id
            form.express_no = this.form.express_no
            form.express_name = this.form.express_name
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    let res = await this.$Http.setExpress(form)
                    if (res.status == 1) {
                        this.$message.success('发货成功');
                        await this.getCompanyList()
                        this.show = false
                    }
                } else {
                    return false;
                }
            });
        },
        async handleClick(row, flag) {
            if (flag == 0) {
                this.$router.push(`/orderManagement/orderList/orderDetail?title=详情&id=${row.id}`)
            } else if (flag == 1) {
                let res = await this.$Http.getExpress({ orders_id: row.id })
                if (res.status == 1) {
                    this.dialogVisible = true
                    this.detail = res.data
                }
            } else {
                this.form.orders_id = row.id
                this.form.express_no = ''
                this.form.express_name = ''
                this.show = true
            }
        },
        handleSizeChange(val) {
            this.form.limit = val
            this.getCompanyList()
        },
        handleCurrentChange(val) {
            this.form.page = val
            this.getCompanyList()
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    .head-tabs {
        height: 40px;
        width: 100%;
        padding-left: 30px;

        ::v-deep {
            .el-tabs__nav-wrap::after {
                background-color: transparent;
            }
            .el-tabs__active-bar {
                background-color: #409eff;
            }
            .el-tabs__item {
                height: 40px;
                line-height: 30px;
                font-size: 16px;
                font-weight: 400;
                text-align: left;
                letter-spacing: 1px;
                color: #364164;
            }
            .is-active {
                font-weight: 600 !important;
                color: #409eff;
            }
        }
    }
    section {
        background: #f7fafc;
        padding: 30px;
        .content {
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 16px;
            padding-top: 18px;
            padding-bottom: 20px;
            .top {
                padding-left: 29px;
            }
            ::v-deep .el-checkbox__input {
                margin-left: 10px;
            }
            ::v-deep .el-date-editor {
                width: -webkit-fill-available;
            }
        }
    }
}
</style>